import { getDefaultAvatarUrl } from '@/utils/default'
import styles from './style.less'
import classNames from 'classnames';
import { WomanOutlined, ManOutlined } from '@ant-design/icons';
import { Modal } from 'antd'
import { useState } from 'react';

const UserBrief = (props) => {

    const {
        user = {},
        showUsername = false,
        role,
        size = "small",
        showAvatar = true,
        showName = true,
        onClick
    } = props;


    const [showUserBriefModalVisible, setShowUserBriefModalVisible] = useState(false);

    const showUserBriefModal = (e) => {
        if (e) {
            e.stopPropagation();
            e.preventDefault()
        }
        setShowUserBriefModalVisible(true)
    }

    const onUserClick = (e) => {
        if (onClick) {
            onClick(e);
        } else {
            showUserBriefModal(e)
        }
    }



    const avatarSizeToClassName = (size) =>
        classNames({
            [styles.avatarItemLarge]: size === 'large',
            [styles.avatarItemSmall]: size === 'small',
            [styles.avatarItemMini]: size === 'mini',
        });


    const userBriefToClassName = (size) =>
        classNames(styles.userBrief, {
            [styles.avatarItemLarge]: size === 'large',
            [styles.avatarItemSmall]: size === 'small',
            [styles.avatarItemMini]: size === 'mini',
        });


    const renderUserBrief = () => {
        if (!showAvatar) {
            return <div className={styles.userName}>
                <div className={styles.userNickName} onClick={onUserClick}>{user.nickName}</div>
                {(showUsername || role) && <div style={{ marginTop: -8 }}>
                    <span className={styles.userExtrName}>{showUsername && user.username} </span>
                    {role && <span className={styles.roleName}>{role}</span>}
                </div>}
            </div>
        }
        if (!showName) {
            return <div className={avatarSizeToClassName(size)}>
                <img onClick={onUserClick} src={user.avatarUrl || getDefaultAvatarUrl(user.id)}></img>
            </div>
        }
        return (<div className={userBriefToClassName(size)} onClick={onUserClick}>
            {/* {user.avatarUrl ?
            <Avatar src={user.avatarUrl}></Avatar> :
            <Avatar>{user.nickName.substr(0, 1)}</Avatar>} */}
            <img src={user.avatarUrl || getDefaultAvatarUrl(user.id)} ></img>
            <div className={styles.userName}>
                <div className={styles.userNickName}>{user.nickName || user.username}</div>
                {(showUsername || role) && <div style={{ marginTop: -8 }}>
                    <span className={styles.userExtrName}>{showUsername && user.username} </span>
                    {role && <span className={styles.roleName}>{role}</span>}
                </div>}
            </div>
        </div>)
    }

    return <div>
        {renderUserBrief()}
        <Modal
            closable={true}
            keyboard={true}
            maskClosable={true}
            onCancel={(e) => {
                e.stopPropagation()
                setShowUserBriefModalVisible(false)
            }}
            footer={null}
            visible={showUserBriefModalVisible}>
        </Modal>
    </div>

}


const GenderIcon = (props) => {
    const { gender } = props
    return <>
        {gender === 0 ? <WomanOutlined style={
            {
                color: "#eb2f96"
            }
        }
            {...props}
        /> : <ManOutlined style={
            {
                color: "#55acee"
            }
        }
            {...props}
            />}
    </>
}
export { GenderIcon };

export default UserBrief;